
import { useState } from 'react'

function Shape({ onShapeSelect, selectedShape }) {
  const [activeCategory, setActiveCategory] = useState('basic') // 'basic' | 'flowchart'

  // 普通图形
  const basicShapes = [
    { id: 'circle', name: '圆形', type: 'circle' },
    { id: 'ellipse', name: '椭圆形', type: 'ellipse' },
    { id: 'rectangle', name: '矩形', type: 'rectangle' },
    { id: 'triangle', name: '三角形', type: 'triangle' },
    { id: 'diamond', name: '菱形', type: 'diamond' },
    { id: 'hexagon', name: '六边形', type: 'hexagon' },
    { id: 'star', name: '星形', type: 'star' },
    { id: 'heart', name: '心形', type: 'heart' }
  ]

  // 流程图图形
  const flowchartShapes = [
    { id: 'process', name: '处理', type: 'process' },
    { id: 'decision', name: '判断', type: 'decision' },
    { id: 'start', name: '开始/结束', type: 'start' },
    { id: 'input', name: '输入/输出', type: 'input' },
    { id: 'document', name: '文档', type: 'document' },
    { id: 'database', name: '数据库', type: 'database' },
    { id: 'subprocess', name: '子流程', type: 'subprocess' }
  ]

  const handleShapeClick = (shape) => {
    if (onShapeSelect) {
      onShapeSelect(shape)
    }
  }

  const renderBasicShape = (shape) => {
    const isSelected = selectedShape?.id === shape.id
    
    switch (shape.type) {
      case 'circle':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <circle cx="20" cy="20" r="15" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'ellipse':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <ellipse cx="20" cy="20" rx="18" ry="12" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'rectangle':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <rect x="5" y="8" width="30" height="24" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'triangle':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <polygon points="20,5 35,35 5,35" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'diamond':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <polygon points="20,5 35,20 20,35 5,20" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'hexagon':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <polygon points="20,5 32,12 32,28 20,35 8,28 8,12" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'star':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <polygon points="20,5 24,15 35,15 27,22 30,32 20,26 10,32 13,22 5,15 16,15" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'heart':
        return (
          <div className={`shape-item ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <path d="M20,30 C20,30 15,25 10,20 C5,15 5,10 10,10 C15,10 20,15 20,20 C20,15 25,10 30,10 C35,10 35,15 30,20 C25,25 20,30 20,30 Z" fill="none" stroke="#333" strokeWidth="2"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      default:
        return null
    }
  }

  const renderFlowchartShape = (shape) => {
    const isSelected = selectedShape?.id === shape.id
    
    switch (shape.type) {
      case 'process':
        return (
          <div className={`shape-item flowchart ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <rect x="5" y="8" width="30" height="24" fill="none" stroke="#333" strokeWidth="2"/>
              {/* 连接点 */}
              <circle cx="20" cy="8" r="2" fill="#007bff"/>
              <circle cx="20" cy="32" r="2" fill="#007bff"/>
              <circle cx="5" cy="20" r="2" fill="#007bff"/>
              <circle cx="35" cy="20" r="2" fill="#007bff"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'decision':
        return (
          <div className={`shape-item flowchart ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <polygon points="20,5 35,20 20,35 5,20" fill="none" stroke="#333" strokeWidth="2"/>
              {/* 连接点 */}
              <circle cx="20" cy="5" r="2" fill="#007bff"/>
              <circle cx="20" cy="35" r="2" fill="#007bff"/>
              <circle cx="5" cy="20" r="2" fill="#007bff"/>
              <circle cx="35" cy="20" r="2" fill="#007bff"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'start':
        return (
          <div className={`shape-item flowchart ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <ellipse cx="20" cy="20" rx="18" ry="12" fill="none" stroke="#333" strokeWidth="2"/>
              {/* 连接点 */}
              <circle cx="20" cy="8" r="2" fill="#007bff"/>
              <circle cx="20" cy="32" r="2" fill="#007bff"/>
              <circle cx="2" cy="20" r="2" fill="#007bff"/>
              <circle cx="38" cy="20" r="2" fill="#007bff"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'input':
        return (
          <div className={`shape-item flowchart ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <path d="M5,8 L15,8 L15,32 L5,32 L5,8 M15,8 L35,8 L35,32 L15,32" fill="none" stroke="#333" strokeWidth="2"/>
              {/* 连接点 */}
              <circle cx="20" cy="8" r="2" fill="#007bff"/>
              <circle cx="20" cy="32" r="2" fill="#007bff"/>
              <circle cx="5" cy="20" r="2" fill="#007bff"/>
              <circle cx="35" cy="20" r="2" fill="#007bff"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'document':
        return (
          <div className={`shape-item flowchart ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <path d="M5,8 L25,8 L35,18 L35,32 L5,32 L5,8 M25,8 L25,18 L35,18" fill="none" stroke="#333" strokeWidth="2"/>
              {/* 连接点 */}
              <circle cx="20" cy="8" r="2" fill="#007bff"/>
              <circle cx="20" cy="32" r="2" fill="#007bff"/>
              <circle cx="5" cy="20" r="2" fill="#007bff"/>
              <circle cx="35" cy="20" r="2" fill="#007bff"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'database':
        return (
          <div className={`shape-item flowchart ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <ellipse cx="20" cy="8" rx="15" ry="4" fill="none" stroke="#333" strokeWidth="2"/>
              <ellipse cx="20" cy="32" rx="15" ry="4" fill="none" stroke="#333" strokeWidth="2"/>
              <line x1="5" y1="8" x2="5" y2="32" stroke="#333" strokeWidth="2"/>
              <line x1="35" y1="8" x2="35" y2="32" stroke="#333" strokeWidth="2"/>
              {/* 连接点 */}
              <circle cx="20" cy="4" r="2" fill="#007bff"/>
              <circle cx="20" cy="36" r="2" fill="#007bff"/>
              <circle cx="5" cy="20" r="2" fill="#007bff"/>
              <circle cx="35" cy="20" r="2" fill="#007bff"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      case 'subprocess':
        return (
          <div className={`shape-item flowchart ${isSelected ? 'selected' : ''}`} onClick={() => handleShapeClick(shape)}>
            <svg width="40" height="40" viewBox="0 0 40 40">
              <rect x="5" y="8" width="30" height="24" fill="none" stroke="#333" strokeWidth="2"/>
              <line x1="5" y1="16" x2="35" y2="16" stroke="#333" strokeWidth="2"/>
              {/* 连接点 */}
              <circle cx="20" cy="8" r="2" fill="#007bff"/>
              <circle cx="20" cy="32" r="2" fill="#007bff"/>
              <circle cx="5" cy="20" r="2" fill="#007bff"/>
              <circle cx="35" cy="20" r="2" fill="#007bff"/>
            </svg>
            <span>{shape.name}</span>
          </div>
        )
      default:
        return null
    }
  }

  return (
    <div className="shape-container">
      <div className="shape-tabs">
        <button 
          className={`tab ${activeCategory === 'basic' ? 'active' : ''}`}
          onClick={() => setActiveCategory('basic')}
        >
          普通图形
        </button>
        <button 
          className={`tab ${activeCategory === 'flowchart' ? 'active' : ''}`}
          onClick={() => setActiveCategory('flowchart')}
        >
          流程图
        </button>
      </div>
      
      <div className="shape-grid">
        {activeCategory === 'basic' 
          ? basicShapes.map(shape => (
            <div key={shape.id}>
              {renderBasicShape(shape)}
            </div>
          ))
          : flowchartShapes.map(shape => (
            <div key={shape.id}>
              {renderFlowchartShape(shape)}
            </div>
          ))
        }
      </div>
    </div>
  )
}

export default Shape
